var arr = [
  {
    name: '郑00昊',
    src: './img/picture0.jpg',
    height: 175,
    weight: 130,
    sex: 'male',
    msg: 'superman',
  },
  {
    name: '李天成',
    src: './img/picture1.jpg',
    height: 170,
    weight: 100,
    sex: 'male',
    msg: 'ren',
  },
  {
    name: '梁恐爪',
    src: './img/picture7.jpg',
    height: 178,
    weight: 120,
    sex: 'female',
    msg: 'ren',
  },
  {
    name: '攀枝花',
    src: './img/picture2.jpg',
    height: 170,
    weight: 160,
    sex: 'female',
    msg: 'ren',
  },
  {
    name: '张曦文',
    src: './img/picture3.jpg',
    height: 170,
    weight: 160,
    sex: 'male',
    msg: 'chiji',
  },
  {
    name: '陈涵的号',
    src: './img/picture4.jpg',
    height: 170,
    weight: 160,
    sex: 'male',
    msg: 'lol',
  },
  {
    name: '党志强',
    src: './img/picture5.jpg',
    height: 170,
    weight: 160,
    sex: 'male',
    msg: 'cf',
  },
];

var oUl = document.getElementById('wrapper').children[1].children[0];
var oInput = document.getElementsByTagName('input')[0];

oInput.oninput = function () {
  // console.log(this.value);
};

var span = document.getElementsByTagName('span');
for (var i = 0; i < span.length; i++) {
  (function (_index) {
    span[_index].onclick = function () {
      for (var j = 0; j < span.length; j++) {
        span[j].className = 'btn';
      }
      span[_index].className = 'btn active';
      console.log(span[_index].innerText);
      var newArr = filterBySex(arr, span[_index].innerText);
      console.log(newArr);
      renderPage(newArr);
    };
  })(i);
}

function filterBySex(data, sex) {
  if (sex == 'all') {
    return data;
  }
  return data.filter(function (item, index, self) {
    return item.sex == sex;
  });
}

function renderPage(arr) {
  var htmlStr = '';
  arr.forEach(function (item, i) {
    htmlStr +=
      '<li><img src=' +
      item.src +
      "><p class='name'>" +
      item.name +
      "</p><p class='msg'>" +
      item.msg +
      '</p></li>';
  });
  oUl.innerHTML = htmlStr;
}
renderPage(arr);
